<template>
	<view>
		<input class="dwmc" @blur="searchFn([search,xz[x],qy[q]],yshData)" v-model="search" placeholder="请输入单位名称,失去焦点开始搜索" placeholder-style="color:#AAAAAA" type="text" />
		<view class="xzhy">
				<text>乡镇</text>
				<text>{{xz[x]}}</text>
				<picker @change="xzcg" :range="xz">
					<text class="picker">▼</text>
				</picker>
				<text>企业类型</text>
				<text>{{qy[q]}}</text>
				<picker @change="qycg" :range="qy">
					<text class="picker">▼</text>
				</picker>
		</view>
		<view v-for="(item,index) in searchData" :key="item" class="shitem" @click="yshxq(item)">
			<view>
				<view>单位名称</view>
				<view>用水管理人</view>
				<view>联系方式</view>
			</view>
			<view>
				<view>{{item.qy_name}}</view>
				<view>{{item.nys_tianbiaoren}}</view>
				<view>{{item.qy_gtel}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {reactive,toRefs,onMounted} from 'vue'
	import {useStore} from 'vuex';
	import http from '../../utils/http'
	export default {
		setup(){
			const {commit}=useStore();
			let data=reactive({
				xz:['全部','江苏太仓','城厢镇'],
				qy:['全部','工业企业','大生活用水户'],
				x:0,
				q:0,
				search:'',
				searchData:[],
				yshxq(v){
					commit('slapp/setYsh',v);
					uni.navigateTo({url:'/pages/slsy/qysck'})
				},
				xzcg(e){
					data.x=e.detail.value
					data.searchFn([data.search,data.xz[data.x],data.qy[data.q]],data.yshData)
				},
				qycg(e){
					data.q=e.detail.value
					data.searchFn([data.search,data.xz[data.x],data.qy[data.q]],data.yshData)
				},
				searchFn(v,dat){
					data.searchData=[];
					dat.forEach(item=>{
						let qy=String(item.qy_leixing);
						let xz=String(item.qy_tongxun);
						let name=String(item.qy_name);
						let is=1
						if(v[2]!='全部'&&qy.indexOf(v[2])==-1){
							is=0
						}else if(v[1]!='全部'&&xz.indexOf(v[1])==-1){
							is=0
						}else if(name.indexOf(v[0])==-1){
							is=0
						}
						if(is){
							data.searchData.push(item)
						}
					})
				},
				yshData:[]
			})
			return {...toRefs(data)}
		},
		onShow(){
			this.x=0,
			this.q=0,
			this.search='',
			http({
				url:'/yshxx'
			}).then((res)=>{
				this.yshData=res.data.data
				this.searchData=res.data.data
			})
		}
	}
</script>

<style lang="scss">
	.dwmc {
		width: 700rpx;
		margin: 30rpx auto 0 auto;
		padding-left: 40rpx;
		box-sizing: border-box;
		height: 80rpx;
		border-radius: 40rpx;
		border: 1px solid #E4E4E4;
		line-height: 80rpx;
	}
	.picker{
		color: #3478F7;
	}
	.xzhy{
		padding:30rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #E4E4E4;
	}
	.shitem{
		color: #666666;
		display: flex;
		padding: 20rpx;
		border-bottom: 1px solid #E4E4E4;
		&>view:first-child{
			margin-right: 60rpx;
			font-weight: 600;
		}
		&>view>view{
			height: 50rpx;
			line-height: 50rpx;
		}
	}
</style>
